<template>
  <div>

    <el-row>
      <el-col :span="24">
        <div class="grid-content bg-purple-dark">
          <h2>采购信息查询</h2>
        </div>
      </el-col>
    </el-row>

    <el-dialog
        :visible.sync="findByPurchaseRecordBeanIdShow1"
        width="60%"
    >
      <FindByPurchaseRecordBeanId :movie-id="findByPurchaseRecordBeanIdId" v-if="findByPurchaseRecordBeanIdShow2" ref="findByPurchaseRecordBeanIdRef"></FindByPurchaseRecordBeanId>
    </el-dialog>

    <el-row>
      <el-col :span="24">
        <div class="grid-content bg-purple-dark">
          <el-table
              :data="tableData"
              style="width: 100%"
              @current-change="handleCurrentChange">
            <el-table-column
                prop="supplierBean.supplierName"
                label="供应商名称"
                align="center">
            </el-table-column>
            <el-table-column
                prop="userBean.realName"
                label="采购员"
                align="center">
            </el-table-column>
            <el-table-column
                prop="date"
                label="采购时间"
                align="center">
            </el-table-column>
          </el-table>
        </div>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="12">
        <div class="grid-content bg-purple">
          <el-pagination
              background
              layout="prev, pager, next"
              :total="total"
              :page-size="pageSize"
              :current-page="currentPage"
              @current-change="currentPageFn">
          </el-pagination>
        </div>
      </el-col>
    </el-row>

    <el-row style="margin-top: 50px">
      <el-col :span="12">
        <div class="grid-content bg-purple">
          <el-button type="primary" plain style="margin-right: 20px" @click="findByPurchaseRecordBeanId">查 看 采 购 详 情</el-button>
        </div>
      </el-col>

      <el-col :span="12">
        <div class="grid-content bg-purple-light" style="margin-left: 100px">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>查询采购信息</span>

              <el-row>
                <el-col :span="7" class="labClass">
                  <div class="grid-content bg-purple" style="margin-top: 30px">
                    供应商：
                  </div>
                </el-col>
                <el-col :span="15">
                  <div class="grid-content bg-purple-light" style="margin-top: 20px">
                    <el-input v-model="supplierName" placeholder="请输入内容" class="labClass"></el-input>
                  </div>
                </el-col>
              </el-row>

              <el-row style="margin-top: 10px">
                <el-col :span="7" class="labClass">
                  <div class="grid-content bg-purple" style="margin-top: 10px">
                    起始日期：
                  </div>
                </el-col>
                <el-col :span="15">
                  <el-date-picker
                      v-model="startDate"
                      type="date"
                      value-format="yyyy-MM-dd"
                      placeholder="选择日期时间">
                  </el-date-picker>
                </el-col>
              </el-row>

              <el-row style="margin-top: 10px">
                <el-col :span="7" class="labClass">
                  <div class="grid-content bg-purple" style="margin-top: 10px">
                    结束日期：
                  </div>
                </el-col>
                <el-col :span="15">
                  <el-date-picker
                      v-model="endDate"
                      type="date"
                      value-format="yyyy-MM-dd"
                      placeholder="选择日期时间">
                  </el-date-picker>
                </el-col>
              </el-row>
            </div>
            <el-button type="primary" plain style="margin-right: 20px" @click="init">查询</el-button>
          </el-card>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import FindByPurchaseRecordBeanId from "./findByPurchaseRecordBeanId";
export default {
  name: "purchasinginformationinquiry",
  components: {FindByPurchaseRecordBeanId},
  data() {
    return {
      findByPurchaseRecordBeanIdShow1:false,
      findByPurchaseRecordBeanIdId:0,
      findByPurchaseRecordBeanIdShow2:false,

      tableData: [],
      currentRow: '',
      total: 0,
      pageSize: 4,
      currentPage: 1,

      supplierName: '',
      startDate: '',
      endDate: ''
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    currentPageFn(currentPage) {
      this.currentPage = currentPage
      this.init()
    },
    init() {
      let startDate = '';
      let endDate = '';
      if (this.startDate != null) {
        startDate = this.startDate
      }
      if (this.endDate != null) {
        endDate = this.endDate
      }
      let params = {
        current: this.currentPage,
        size: this.pageSize,
        supplierName: this.supplierName,
        startDate: startDate,
        endDate: endDate
      }
      this.$axios.get('drp/purchaserecord/findByItem', {params: params}).then(
          r => {
            this.tableData = r.data.records;
            this.total = r.data.total;
          }
      )
    },
    handleCurrentChange(val){
      this.currentRow=val
    },
    findByPurchaseRecordBeanId(){
      if (this.currentRow==''){
        this.$message.warning("请选中一行")
      }else {
        this.findByPurchaseRecordBeanIdShow1=true
        this.findByPurchaseRecordBeanIdShow2=true
        this.$nextTick(()=>{
          this.$refs.findByPurchaseRecordBeanIdRef.init(this.currentRow.purchaseId)
        })
      }
    }
  }
}
</script>

<style scoped>

</style>